import React from 'react';
import echarts from 'echarts';
import { Tabs,Form } from 'antd';
import InnerForm from 'components/DBTable/InnerForm.js';
const TabPane = Tabs.TabPane;


class Auditquantity extends React.Component{
    constructor(){
        super()
        this.state = {
            data:[{
                title:{text:"123"},
                color: ['#3398DB'],
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[10, 52, 200, 334, 390, 330, 220]
                    }
                ]
            },
            {
                title: {
                    text: '未来一周气温变化',
                    subtext: '纯属虚构'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:['最高气温','最低气温']
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis:  {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一','周二','周三','周四','周五','周六','周日']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                },
                series: [
                    {
                        name:'最高气温',
                        type:'line',
                        data:[11, 11, 15, 13, 12, 13, 10],
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name:'最低气温',
                        type:'line',
                        data:[1, -2, 2, 5, 3, 2, 0],
                        markPoint: {
                            data: [
                                {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'},
                                [{
                                    symbol: 'none',
                                    x: '90%',
                                    yAxis: 'max'
                                }, {
                                    symbol: 'circle',
                                    label: {
                                        normal: {
                                            position: 'start',
                                            formatter: '最大值'
                                        }
                                    },
                                    type: 'max',
                                    name: '最高点'
                                }]
                            ]
                        }
                    }
                ]
            }
       ],
       arr:[{id:"chart1",width:"60%",height:500},{id:"chart2",width:"32%",height:500}],
       query:{}
    }    
}
    componentWillMount(){
        const echartsName = this.props.route.echartsName;
        try{
            this.querySchema=require(`../../../echarts/${echartsName}/formquery.js`)
        }catch(err){
            console.log(err)
        }
        try{
            this.tableConfig=require(`../../../echarts/${echartsName}/config.js`)
        }catch(err){
            console.log(err)
        }
        
    }
    componentDidMount(){
        const { arr ,data } = this.state;
        arr.map((res,i)=>{
            this.getChart(res.id,data[i])
        })     
    }
   
    getChart(id,obj){
        echarts.init(document.getElementById(id)).setOption(obj)
    }
    handleChange(){
        setTimeout(function() {
            echarts.init(document.getElementById("chart3")).setOption(
            {
            title: {
                text: '未来一周气温变化',
                subtext: '纯属虚构'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['最高气温','最低气温']
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis:  {
                type: 'category',
                boundaryGap: false,
                data: ['周一','周二','周三','周四','周五','周六','周日']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} °C'
                }
            },
            series: [
                {
                    name:'最高气温',
                    type:'line',
                    data:[11, 11, 15, 13, 12, 13, 10],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name:'最低气温',
                    type:'line',
                    data:[1, -2, 2, 5, 3, 2, 0],
                    markPoint: {
                        data: [
                            {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'},
                            [{
                                symbol: 'none',
                                x: '90%',
                                yAxis: 'max'
                            }, {
                                symbol: 'circle',
                                label: {
                                    normal: {
                                        position: 'start',
                                        formatter: '最大值'
                                    }
                                },
                                type: 'max',
                                name: '最高点'
                            }]
                        ]
                    }
                }
            ]
        }
        )
        }, 0);      
    }
    getInnerForm() {
        let form = null;
        if (this.tableConfig.showQueryFrom) {
            if (this.InnerNewFrom == null) {
                this.InnerNewFrom = Form.create({ onFieldsChange: this.getFormData })(InnerForm);
            }
            const InnerNewFrom = this.InnerNewFrom;
            form = (<InnerNewFrom ref="getInnerFormData"  schema={this.querySchema} tableConfig={this.tableConfig} />);
            return (form)
        }
    }

   
    render(){
        return(
            <div>
                {this.getInnerForm()}
                <Tabs defaultActiveKey="1" onTabClick={this.handleChange}>
                    <TabPane tab="按日统计" key="1">
                        <div id='chart1' style={{width:"60%",height:500,float:"left",marginRight:20}}></div>
                        <div id='chart2' style={{width:"32%",float:"left",height:500}}></div>
                    </TabPane>
                    <TabPane tab="按月统计" key="2">
                        <div id="chart3" style={{width:"100%",height:500}}></div>
                    </TabPane>
                </Tabs>
            </div>
        )
    }
}

export default Auditquantity;